<template>
	<div class="page-container did">
		<el-card class="page-form-card">
			<!--			<div class="flex">-->
			<!--				<div class="did__left w-[177px] mr-[32px] h-[48px]">-->
			<!--					<div v-for="(item, index) in tab" :key="index" :class="['did__left&#45;&#45;item', tabActive === index && 'did__left&#45;&#45;active']" @click="handleTab(index)">{{ item }}</div>-->
			<!--				</div>-->
			<div class="did__right flex-1 h-[100vh]">
				<el-form ref="form" label-width="200px" :model="form" :rules="rules">
					<el-form-item label="推荐店铺分润比例(一级):" prop="storeReferrer">
						<div class="flex items-center">
							<el-input v-model="form.storeReferrer" class="!w-[250px]" placeholder="请输入店铺分润比例一级奖励">
								<span slot="suffix">%</span>
							</el-input>
							<!--							<el-button class="ml-[12px] flex items-center" type="primary" @click="handleEdit('push1', 0)">编辑 </el-button>-->
						</div>
					</el-form-item>
					<el-form-item label="推荐店铺分润比例(二级):" prop="inStoreReferrer">
						<div class="flex items-center">
							<el-input v-model="form.inStoreReferrer" class="!w-[250px]" placeholder="请输入店铺分润比例二级奖励">
								<span slot="suffix">%</span>
							</el-input>
							<!--							<el-button class="ml-[12px] flex items-center" type="primary" @click="handleEdit('extrapolation1', 1)">编辑 </el-button>-->
						</div>
					</el-form-item>
					<el-form-item label="推荐会员充值分润比例(一级):" prop="directReferrer">
						<div class="flex items-center">
							<el-input v-model="form.directReferrer" class="!w-[250px]" placeholder="请输入会员充值分润一级奖励">
								<span slot="suffix">%</span>
							</el-input>
							<!--							<el-button class="ml-[12px] flex items-center" type="primary" @click="handleEdit('push', 0)">编辑 </el-button>-->
						</div>
					</el-form-item>
					<el-form-item label="推荐会员充值分润比例(二级):" prop="indirectReferrer">
						<div class="flex items-center">
							<el-input v-model="form.indirectReferrer" class="!w-[250px]" placeholder="请输入会员充值分润二级奖励">
								<span slot="suffix">%</span>
							</el-input>
							<!--							<el-button class="ml-[12px] flex items-center" type="primary" @click="handleEdit('extrapolation', 1)">编辑 </el-button>-->
						</div>
					</el-form-item>
					<el-button type="primary" size="medium" style="position: absolute" @click="handleEdit">保存</el-button>
				</el-form>
			</div>
			<!--			</div>-->
		</el-card>
	</div>
</template>
<script>
import { updateDividendSetting } from '@/api/mall/dividend';
export default {
	name: 'Dividend',
	data() {
		return {
			tab: ['分红配置'],
			tabActive: 0,
			rules: {
				storeReferrer: [{ required: true, message: '请输入店铺分润比例一级奖励', trigger: 'blur' }],
				inStoreReferrer: [{ required: true, message: '请输入店铺分润比例二级奖励', trigger: 'blur' }],
				directReferrer: [{ required: true, message: '请输入会员充值分润二级奖励', trigger: 'blur' }],
				indirectReferrer: [{ required: true, message: '请输入会员充值分润二级奖励', trigger: 'blur' }],
			},
			queryParams: {
				storeReferrer: null,
				inStoreReferrer: null,
				directReferrer: null,
				indirectReferrer: null,
			},
			form: {
				storeReferrer: null,
				inStoreReferrer: null,
				directReferrer: null,
				indirectReferrer: null,
			},
			list: [],
		};
	},
	created() {
		this.getInfo();
	},
	methods: {
		getInfo() {
			this.$request.get('/system/dict/data/list?pageNum=1&pageSize=10&dictType=dividend').then((res) => {
				this.list = res.rows;
				this.form.storeReferrer = res.rows[0].dictValue;
				this.form.inStoreReferrer = res.rows[1].dictValue;
				this.form.directReferrer = res.rows[2].dictValue;
				this.form.indirectReferrer = res.rows[3].dictValue;
			});
		},
		handleEdit() {
			console.log(this.form);
			// this.$refs['form'].validateField(key, (errorMessage) => {
			this.$refs['form'].validate((valid) => {
				// let valid = errorMessage === '';
				if (valid) {
					updateDividendSetting(this.form).then((response) => {
						this.msgSuccess('保存成功');
						this.open = false;
						this.getList();
					});
					// this.$request
					// 	.put(`/system/dict/data`, {
					// 		...this.list[this.form.],
					// 		dictValue: this.form[key],
					// 	})
					// 	.then(() => {
					// 		this.$message.success('保存成功');
					// 	});
				}
			});
		},
		handleTab(index) {
			this.tabActive = index;
		},
	},
};
</script>

<style lang="scss" scoped>
.did {
	::v-deep .el-card__body {
		height: 100vh;
	}
	&__left {
		border: 1px solid #4c59c6;
		border-radius: 4px;
		&--item {
			cursor: pointer;
			height: 48px;
			color: #2c333f;
			font-size: 12px;
			text-align: center;
			line-height: 48px;
			font-family: Microsoft YaHei-Regular, Microsoft YaHei;
		}
		&--active {
			background: rgba(76, 89, 198, 0.2);
			color: #4c59c6;
			font-weight: bold;
		}
	}
	&__right {
		border-left: 1px solid #f3f4f7;
	}
}
</style>
